<!DOCTYPE html>
<html class="ui-page-login">

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>验证码</title>
		<link href="css/mui.min.css" rel="stylesheet" />
		<link href="css/style.css" rel="stylesheet" />
		<link href="css/reg_style.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="css/common.css"/>

		<style type="text/css">
			header em{
				color: #4198FF;
			}
			.head1 em{
				float: left;
				width: 0.27rem;
				height: 0.36rem;
			}
			.head1 .img1 {
				float: left;
				width: 0.15rem;
				height: 0.15rem;
				margin-top: 0.1rem;
				margin-left: 0.07rem;
			}
			.mui-input-row{
				border-bottom: none;
			}
		</style>

	</head>

	<body>
		<header class="mui-bar mui-bar-nav head1">
			<em class="mui-action-back"><img class="img1" src="img/fanhui.png" alt="" /></em>
		</header>
		<div class="mui-content">
			<div class="mui-content-padded content-box">
				<h3 class="title-ver no-bottom">请输入验证码</h3>
				<h6 class="title-notes">验证码已经发送至手机:<span id='register_phone'></span></h6>
				<form id='login-form' class="mui-input-group">
					<div class="mui-input-row" style='display: none;'>
						<label><img class="input_logo_account" src="img/sjh.png" /></label>
						<input maxlength="11" id='account' pattern="\d*" type="number" class="mui-input-clear mui-input" placeholder="请输入您的手机号">
					</div>
					<div class="mui-input-row">
						<input oninput="if(value.length>1)value=value.slice(0,1)" onkeyup="judge_ver(event,1);" maxlength="1" id='ver1' pattern="\d*" type="number" class="input_ver" placeholder="">
						<input oninput="if(value.length>1)value=value.slice(0,1)" onkeyup="judge_ver(event,2);" maxlength="1" id='ver2' pattern="\d*" type="number" class="input_ver" placeholder="">
						<input oninput="if(value.length>1)value=value.slice(0,1)" onkeyup="judge_ver(event,3);" maxlength="1" id='ver3' pattern="\d*" type="number" class="input_ver" placeholder="">
						<input oninput="if(value.length>1)value=value.slice(0,1)" onkeyup="judge_ver(event,4);" maxlength="1" id='ver4' pattern="\d*" type="number" class="input_ver" placeholder="">
					</div>
				</form>
				<div class="link-area forgetPassword black">
					<a id='forgetPassword'><span id='time3' style="color: #FF6647;">45</span><span>秒后，重发验证码</span></a>
				</div>
				<button onclick="user_find_code();" disabled="disabled" id='btn_login' class="mui-btn mui-btn-block mui-btn-primary" style="width: 110%;margin-left: -5%;">提交</button>
			</div>
			<div class="mui-content-padded oauth-area">

			</div>
		</div>

		<script src="js/mui.min.js"></script>
		<script src="js/mui.enterfocus.js"></script>
		<script src="js/app.js"></script>
		<script src="js/jquery.js"></script>
		<script type="text/javascript" src="js/jsencrypt.js"></script>
		<script src="js/md5.js"></script>
		<script src="js/crypto-js.js"></script>
		<script type="text/javascript" src="js/common.js"></script>
		<script>
			mui.ready(function() {
				//读取登录信息
				var register_phone = storage["register_phone"];
				if(register_phone != null) {
					mui("#account")[0].value = register_phone;
					mui("#register_phone")[0].innerText = register_phone;
				}

				//定时
				time1();

			});

			//判断验证码，是否全部输入
			function judge_ver(e, flag) {
				var keycode = e.keyCode;　　　　
				//var realkey = String.fromCharCode(event.keyCode);　　　　
				//alert("按键码: " + keycode + " 字符: " + realkey);

				var ver1 = mui('#ver1')[0].value;
				var ver2 = mui('#ver2')[0].value;
				var ver3 = mui('#ver3')[0].value;
				var ver4 = mui('#ver4')[0].value;
				if(ver1.length == 1 && ver2.length == 1 && ver3.length == 1 && ver4.length == 1) {
					document.getElementById("btn_login").disabled = false;
					btn_login_se('jianbian3_shengse',"#btn_login");
				} else {
					document.getElementById("btn_login").disabled = true;
					btn_login_se('jianbian1_qianse',"#btn_login");
				}

				//让下面输入框跳框
				if(flag == 1) {
					if(keycode != 8) {
						mui('#ver2')[0].focus();
						mui('#ver2')[0].select();
					}
				} else if(flag == 2) {
					if(keycode != 8) {
						mui('#ver3')[0].focus();
						mui('#ver3')[0].select();
					}
				} else if(flag == 3) {
					if(keycode != 8) {
						mui('#ver4')[0].focus();
						mui('#ver4')[0].select();
					}
				} else if(flag == 4) {
					if(keycode != 8) {
						mui('#ver1')[0].focus();
						mui('#ver1')[0].select();
					}
				}

			}

			//定时器45秒
			function time1() {
				var i = 0;
				var time2 = window.setInterval(function() {
					i++;
					mui("#time3")[0].innerHTML = 45 - i;
					if(i > 45) {
						window.clearInterval(time2)
						mui("#forgetPassword")[0].innerHTML = '<a  style="color: #FF6647;" href="javascript:user_find();">重发验证码</a>';
					}
				}, 1000)
			}

			//重发验证码
			function user_find_code() {

				var sbx = {};
				sbx.id = mui("#account")[0].value;
				sbx.code = mui("#ver1")[0].value + mui("#ver2")[0].value + mui("#ver3")[0].value + mui("#ver4")[0].value;

//				obj.client = var_client;
//				obj.version = var_version;
//				var encrypt = new JSEncrypt();
//				encrypt.setPublicKey(publicKey);
//				obj.params = encrypt.encrypt(JSON.stringify(sbx));
				
				login_encrypt_md5(sbx);
				console.log(sbx);
				ajax_submit_before(url_host + 'user/find/code', 'user_find_code');

			}

			//验证验证码
			function user_find() {
				mui('#ver1')[0].value = '';
				mui('#ver2')[0].value = '';
				mui('#ver3')[0].value = '';
				mui('#ver4')[0].value = '';
				
				var sbx = {};
				sbx.id = mui("#account")[0].value;

//				obj.client = var_client;
//				obj.version = var_version;
//				var encrypt = new JSEncrypt();
//				encrypt.setPublicKey(publicKey);
//				obj.params = encrypt.encrypt(JSON.stringify(sbx));
				
				login_encrypt_md5(sbx);
				console.log(sbx);				
				ajax_submit_before(url_host + 'user/find', 'user_find_again');
			}
		</script>
	</body>

</html>